import 'package:bottom_picker/bottom_picker.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:get/get.dart';
import 'package:ball_lion/module/live/live_create_logic.dart';
import 'package:ball_lion/resources/colours.dart';
import 'package:ball_lion/resources/styles.dart';
import 'package:ball_lion/utils/date_time_utils.dart';
import 'package:ball_lion/utils/image_utils.dart';
import 'package:ball_lion/utils/utils.dart';
import 'package:ball_lion/widgets/card.dart';
import 'package:ball_lion/widgets/picker_local.dart';
import 'package:ball_lion/widgets/base/wqs_image.dart';
import 'package:ball_lion/widgets/base/wqs_text.dart';
import 'package:ball_lion/widgets/base/wqs_time_picker.dart';

import 'package:ball_lion/widgets/max_bottom_sheet.dart';
import 'package:ball_lion/widgets/base/wqs_button.dart';
import 'package:ball_lion/widgets/select_bottomsheet.dart';

class LiveCreatePage extends StatefulWidget {
  const LiveCreatePage({super.key});

  @override
  State<LiveCreatePage> createState() => _LiveCreatePageState();
}

class _LiveCreatePageState extends State<LiveCreatePage> {
  final LiveCreateLogic logic = Get.put(LiveCreateLogic());

  @override
  Widget build(BuildContext context) {
    return GetBuilder<LiveCreateLogic>(builder: (logic) {
      return Scaffold(
        backgroundColor: Colours.greyF2F3F7,
        appBar: Styles.appBar(
          title: const QsText("创建直播"),
        ),
        body: SafeArea(
          child: Column(
            children: [
              Block(
                  cardStyle: const CardStyle(
                      margin: EdgeInsets.fromLTRB(8, 8, 8, 0),
                      padding: EdgeInsets.symmetric(horizontal: 12)),
                  child: Column(
                    children: [
                      Row(
                        children: [
                          const QsText("直播标题"),
                          Container(width: 12),
                          Expanded(
                            child: TextFormField(
                              focusNode: logic.focus,
                              onTap: logic.focus.requestFocus,
                              controller: logic.titleController,
                              onChanged: (value) => logic.title = value,
                              onTapOutside: (event) => logic.focus.unfocus(),
                              style: const TextStyle(
                                  fontSize: 16, color: Colours.text),
                              decoration: const InputDecoration(
                                  border: InputBorder.none,
                                  hintText: "请输入4-15字标题",
                                  contentPadding: EdgeInsets.zero,
                                  hintStyle: TextStyle(
                                      fontSize: 14, color: Colours.grey99)),
                              autovalidateMode:
                                  AutovalidateMode.onUserInteraction,
                              validator: logic.validateTitle,
                            ),
                          )
                        ],
                      ),
                      const Divider(color: Colours.greyEE, height: 0.5),
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          const QsText("视频封面", needCenter: true),
                          Container(width: 12),
                          GestureDetector(
                              onTap: logic.chooseCover,
                              child: logic.cover.hasValue
                                  ? QsImage(
                                      imageUrl: logic.cover!,
                                      width: 176,
                                      height: 100,
                                      fit: BoxFit.cover,
                                      radius: 8,
                                    )
                                  : Image.asset(
                                      Utils.getImgPath("add_photo_rect.png"),
                                      width: 176,
                                      height: 100))
                        ],
                      ).paddingSymmetric(vertical: 16),
                    ],
                  )),
              Block(
                cardStyle: const CardStyle(
                    margin: EdgeInsets.fromLTRB(8, 8, 8, 0),
                    padding: EdgeInsets.symmetric(horizontal: 12)),
                child: Column(
                  children: [
                    SizedBox(
                      height: 52,
                      child: Row(
                        children: [
                          const QsText("直播分类"),
                          Container(width: 12),
                          GestureDetector(
                            behavior: HitTestBehavior.opaque,
                            onTap: () => logic.sportsId = 1,
                            child: Row(
                              children: [
                                Image.asset(
                                  Utils.getImgPath(logic.sportsId == 1
                                      ? 'check.png'
                                      : 'uncheck.png'),
                                  width: 14,
                                  height: 14,
                                ),
                                const SizedBox(width: 3),
                                const QsText('足球', color: Colours.grey66)
                              ],
                            ),
                          ),
                          const SizedBox(width: 16),
                          GestureDetector(
                            behavior: HitTestBehavior.opaque,
                            onTap: () => logic.sportsId = 2,
                            child: Row(
                              children: [
                                Image.asset(
                                  Utils.getImgPath(logic.sportsId == 2
                                      ? 'check.png'
                                      : 'uncheck.png'),
                                  width: 14,
                                  height: 14,
                                ),
                                const SizedBox(width: 3),
                                const QsText('篮球', color: Colours.grey66)
                              ],
                            ),
                          )
                        ],
                      ),
                    ),
                    const Divider(color: Colours.greyEE, height: 0.5),
                    SizedBox(
                      height: 52,
                      child: Row(
                        children: [
                          const QsText("开播时间"),
                          Container(width: 12),
                          GestureDetector(
                              onTap: () async {
                                DateTime? result = await Get.bottomSheet(
                                  const QsTimePicker(title: "请选择开播时间"),
                                );
                                if (result != null) {
                                  logic.time = result.copyWith(
                                      year: DateTime.now().year);
                                }
                              },
                              child: logic.time != null
                                  ? QsText(
                                      "${logic.time!.formatedString("MM月dd日 HH时mm分")}",
                                      fontSize: 16,
                                      color: Colours.text,
                                    )
                                  : const QsText(
                                      "请选择开播时间",
                                      fontSize: 14,
                                      color: Colours.grey99,
                                    )),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              const Spacer(),
              Container(
                color: Colours.white,
                padding:
                    const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
                child: QsButton(
                  width: double.infinity,
                  height: 48,
                  enable: logic.allDone,
                  backgroundColor: Colours.main,
                  foregroundColor: Colours.white,
                  borderRadius: 8,
                  onPressed: logic.create,
                  text: '立即创建',
                ),
              )
            ],
          ),
        ),
      );
    });
  }
}
